---
const { currentPage } = Astro.props;
import AstroLogo from './Header/AstroLogo.astro';
import {SITE} from '@/config';
import {parseTitle,sortPosts} from '@/util'

const posts = await Astro.glob('../pages/posts/*.md');
const allPosts = sortPosts(posts)

let currentPageMatch = currentPage.slice(1);
if (currentPageMatch.slice(-1) == '/') {
  currentPageMatch = currentPageMatch.substring(0, currentPageMatch.length - 1);
}

const sidebarSections = allPosts.reduce((col, item, i) => {
  const url = item.url;
  const route = {
    title: parseTitle(url),
    link: url.slice(1),
  };
  if (i === 0) {
    const pesudoSection = { text: '' };
    col.push({ ...pesudoSection, children: [] });
  }
  col[col.length - 1].children.push(route);
  return col;
}, []);
---

<nav aria-labelledby="grid-left" class="pt-6 text-800">
  <div class="logo flex">
    <a href="/" class="logo-image">
      <AstroLogo size={40} />
    </a>
    <a href="/">
      <h1 class="text-800">{SITE.title}</h1>
    </a>
  </div>
  <ul class="nav-groups">
    {
      sidebarSections.map((section) => (
        <li>
          <div class="nav-group">
            <ul>
              {section.children.map((child) => (
                <li class="nav-link">
                  <a
                    href={`/${child.link}`}
                    aria-current={`${
                      decodeURIComponent(currentPageMatch) === child.link
                        ? 'page'
                        : 'false'
                    }`}
                  >
                    {child.title}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        </li>
      ))
    }
  </ul>
</nav>

<script is:inline>
  window.addEventListener('DOMContentLoaded', (event) => {
    var target = document.querySelector('[aria-current="page"]');
    if (target && target.offsetTop > window.innerHeight - 100) {
      document.querySelector('.nav-groups').scrollTop = target.offsetTop - 86;
    }
  });
</script>

<style>
  nav {
    width: 100%;
    margin-right: 1rem;
  }
  .nav-groups {
    height: 100%;
    padding: 2rem 0;
    overflow-x: visible;
    overflow-y: auto;
    max-height: 100vh;
  }

  .nav-groups > li + li {
    margin-top: 2rem;
  }

  .nav-groups > :first-child {
    padding-top: 0;
  }

  .nav-groups > :last-child {
    padding-bottom: 2rem;
    margin-bottom: var(--theme-navbar-height);
  }

  .nav-group-title {
    font-size: 1rem;
    font-weight: 700;
    padding: 0rem 1rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    margin-top: -0.5rem;
  }

  .nav-link a {
    font-size: 1.1rem;
    padding: 0.35rem 0.7rem;
    color: inherit;
    text-decoration: none;
    display: block;
    font-weight: 400;
  }
  .nav-link a:hover,
  .nav-link a:focus {
    color: var(--theme-accent);
    font-weight: bold;

  }

  .nav-link a[aria-current='page'] {
    color: var(--theme-accent);
    font-weight: bold;
  }

  @media (min-width: 50em) {
    .nav-groups {
      padding: 0;
      margin-top: 0.7em;
    }
  }
  .logo {
    display: flex;
    overflow: hidden;
    font-size: 2rem;
    font-weight: bolder;
    flex-shrink: 0;
    font-weight: 600;
    line-height: 1;
    color: hsla(var(--color-base-white), 100%, 1);
    gap: 0.25em;
    padding: 0.25em 0;
  }

  .logo a {
    padding: 0.5em 0.25em;
    margin: -0.5em -0.25em;
    text-decoration: none;
    font-weight: bold;
    display: block;
  }

  .logo .logo-image {
    margin-top: -0.6em;
  }

  .logo a {
    transition: color 100ms ease-out;
    color: var(--theme-text);
  }

  .logo a:hover,
  .logo a:focus {
    color: var(--theme-text-accent);
  }

  .logo h1 {
    font: inherit;
    margin: 0;
  }
</style>
